<template>
  <div class="match-details">
    <!-- 顶部切换 -->
    <div class="top-bar">
      <div class="left">
        <div class="top-bar-item">
          <img
            :src="showType === 0 ? iconsList[0].active : iconsList[0].icon"
            alt="Icon1"
            class="icons"
            @click="() => changeShowType(0)"
          />
        </div>
        <div class="top-bar-item">
          <img
            :src="showType === 1 ? iconsList[1].active : iconsList[1].icon"
            alt="Icon1"
            class="icons"
            @click="() => changeShowType(1)"
          />
        </div>
      </div>

      <button class="details-button" @click="goMachDetail">比赛详情 >></button>
    </div>
    <!-- 中间 WebView -->
    <div class="webview-container">
      <iframe :src="matchRef?.animation" frameborder="0" v-if="showType === 0 && has_anim"></iframe>
      <iframe
        v-if="showType === 1 && has_video"
        frameborder="0"
        :key="matchRef?.liveFlvUrl"
        id="iframe_video"
        src="https://video.dunduiby.com"
      />
      <div class="empty" v-if="showType === 0 && !has_anim">暂无动画内容</div>
      <div class="empty" v-if="showType === 1 && !has_video">暂无视频内容</div>
    </div>

    <!-- 底部标签切换 -->
    <div class="tab-container">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        class="tab"
        :class="{ active: activeTab === index }"
        @click="setActiveTab(index)"
      >
        {{ tab.name }}
        <div v-if="activeTab === index" class="underline"></div>
      </div>
    </div>
    <div class="chat">
      <component :is="tabs[activeTab].key" :chatId="chatId" />
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch, onUnmounted ,markRaw} from 'vue'
import { getBasketballDetail } from '@/api/match'
import MatchChat from './MatchChat.vue'
import MatchResult from '@/views/scoreBasketball/components/MatchResult.vue'
import Players from '@/views/scoreBasketball/components/Players.vue'
import { useRouter } from 'vue-router'
import { userStore } from '@/stores/user'
import { AppConfigStore } from '@/stores/app'
import { message } from 'ant-design-vue'
const router = useRouter()

const tabs = ref([
  {name: '聊球', key: markRaw(MatchChat)},
  {name: '赛况', key: markRaw(MatchResult)},
  {name: '球员', key: markRaw(Players)},
  // '指数'
])
const activeTab = ref(0)
const props = defineProps(['match'])
const chatId = ref('')
const matchData = ref(null)
const matchRef = ref(null)
const showType = ref(0)
const has_anim = ref(false)
const has_video = ref(false)
let video_iframe_timer = null
console.log(chatId);

const iconsList = ref([
  {
    icon: new URL('@/assets/icons/score/animation-default.webp', import.meta.url).href,
    active: new URL('@/assets/icons/score/animation-active.webp', import.meta.url).href
  },
  {
    icon: new URL('@/assets/icons/score/video-default.webp', import.meta.url).href,
    active: new URL('@/assets/icons/score/video-active.webp', import.meta.url).href
  }
])
const goMachDetail = () => {
  router.push(`/score-detail?id=${matchData.value.match_id}&type=${matchData.value.sport_id}`)
}
const changeShowType = (type) => {
  showType.value = type
  console.log(type, 'type')
  switch (type) {
    case 0:
      break
    case 1: {
      const data = {
        playAddr: {
          flv: matchRef.value.liveFlvUrl,
          m3u8: matchRef.value.liveM3u8Url,
          DPlayerID: 'iFrame_Player'
        }
      }
      console.log(data, 'data')
      sendMessageToIframe(data)
      video_iframe_timer = setInterval(function () {
        sendMessageToIframe(data)
      }, 1000)
      break
    }
  }
}
const setActiveTab = (index) => {
  activeTab.value = index
}
const sendMessageToIframe = (data) => {
  // console.log(data, 'data')
  var iframe = document.querySelectorAll('iframe')[0]
  if (iframe) {
    iframe.contentWindow.postMessage(data, '*')
    iframe.addEventListener('load', function () {
      console.log(iframe)
      iframe.contentWindow.postMessage(data, '*')
    })
  } else {
    console.log('iframe not found')
  }
}

window.addEventListener('message', function (event) {
  if (event.data.msg === 'playing') {
    if (video_iframe_timer) {
      clearInterval(video_iframe_timer)
    }
  }
})
const getData = async (matchid) => {
  try {
    const res = await getBasketballDetail({ matchId: matchid.toString() })
    console.log(res, 'res getData')
    if (res.code === 200) {
      matchRef.value = res.data
      if (res.data.animation) {
        has_anim.value = true
      }
      if (res.data.liveFlvUrl) {
        has_video.value = true
        changeShowType(1)
      }
    }
  } catch (error) {
    console.log(error, 'error')
  }
}

const showHandle = () => {}
watch(
  () => props.match,
  (newData) => {
    console.log(newData, 'newData')
    if (matchData.value?.match_id !== newData.match_id) {
      matchData.value = newData
      chatId.value = newData.match_id
      has_anim.value = false
      has_video.value = false
      showType.value = 0
      getData(newData.match_id)
    }
  }
)
onUnmounted(() => {
  if (video_iframe_timer) {
    clearInterval(video_iframe_timer)
  }
  window.removeEventListener('message', function (event) {})
})
</script>

<style scoped lang="scss">
.match-details {
  display: flex;
  flex-direction: column;
  // background-color: #f5f5f5;
  width: 373px;
  // width: 440px;
  // height: 550px;
  // background: #ffffff;
  border-radius: 12px 12px 12px 12px;
  // overflow: hidden;
  // overflow: hidden;
  height: 100%;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
  height: 60px;
  .left {
    display: flex;
    align-items: center;
  }
}

.top-bar-item {
  // flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
  cursor: pointer;
  .icons {
    width: 24px;
    height: 24px;
  }
}

.details-button {
  // flex: 2;
  // padding: 10px 20px;
  // background-color: #007bff;
  color: #fff;
  border: none;
  // border-radius: 5px;
  cursor: pointer;
  width: 90px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  font-size: 12px;
  background: rgba(22, 177, 58, 1);
  cursor: pointer;
}

.webview-container {
  // flex: 1;
  overflow: hidden;
  height: 210px;
  background: #444;
  position: relative;
  .empty {
    // height: 248px;
    display: inline-block;
    padding: 0 42px;
    border-radius: 8px;
    height: 52px;
    line-height: 51px;
    font-size: 12px;
    color: rgba(22, 177, 58, 1);
    border: 1px solid rgba(22, 177, 58, 1);
    background: rgba(0, 0, 0, 0.16);
    position: absolute;
    top: 40%;
    left: 50%;
    margin-left: -70px;
  }
}

.webview-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.tab-container {
  display: flex;
  // justify-content: space-around;
  padding: 10px 0;
  background-color: #fff;
  border-top: 1px solid #e0e0e0;
}

.tab {
  position: relative;
  padding: 5px 20px;
  font-size: 14px;
  cursor: pointer;
  color: rgba(175, 184, 203, 1);
  text-align: center;
}

.tab.active {
  color: rgba(22, 177, 58, 1);
  font-weight: bold;
}

.underline {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 2px;
  background-color: rgba(22, 177, 58, 1);
  border-radius: 1px;
}
.chat {
  background: #fff;
  padding: 0 10px 10px 10px;
}
</style>
